import { type ElTableColumn, type TableColumnCtx } from 'element-plus';
import TableProps from 'element-plus/es/components/table/src/table/defaults';
import { type PropType, type ExtractPropTypes } from 'vue';
import { type JSX } from 'vue/jsx-runtime';

type IElTableColumn = InstanceType<typeof ElTableColumn>;
type IAttrs = Omit<IElTableColumn['$props'], 'renderHeader' | 'prop'>;
// 重新定义属性
// 生成props类型
export interface ITableColumnsItem<T> extends IAttrs {
  /** 对应element表格的prop字段 */
  prop?: (string & {}) | (keyof T extends string ? keyof T : never);
  /** 对应element表格的type字段 */
  type?: 'index' | 'selection' | 'expand' | 'date' | 'enum' | 'image';
  /** 日期格式化 */
  format?: string;
  /** 对应element表格的fixed字段 */
  fixed?: boolean | 'left' | 'right';
  /** 文本对齐方式 */
  align?: 'left' | 'center' | 'right';
  /** 是否隐藏溢出内容 值为true会启用xss过滤 */
  ellipsis?: boolean;
  /** 表头自定义渲染 */
  renderHeader?: (column: TableColumnCtx<any>, index: number) => JSX.Element | null | string | number | JSX.Element[];
  /** 自定义渲染 */
  render?: (row: T, column: TableColumnCtx<any>, index: number) => JSX.Element | null | string | number | JSX.Element[];
  /** type: enum 时可传入 options 、 mode 、 dot */
  options?: {
    label: string;
    value: string | number;
    color?: 'primary' | 'danger' | 'warning' | 'success' | 'info' | string;
  }[];
  mode?: 'label' | 'tag';
  dot?: boolean;

  /** 是否隐藏，可用于 ProTableColumnConfig 组件的设置 */
  isHidden?: boolean;

  children?: ITableColumnsItem<T>[];
  selectable?: (row: T, index: number) => boolean;
}

export const proTableProps = Object.assign({}, TableProps, {
  data: {
    type: Array as PropType<any[]>,
    required: true,
    default: () => [],
  },
  border: {
    type: Boolean,
    default: true,
  },
  columns: {
    type: Array as PropType<ITableColumnsItem<any>[]>,
    required: true,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
} as const);

export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
